<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>学生管理</el-breadcrumb-item>
      <el-breadcrumb-item>学生列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片视图-->
    <el-card>
      <!--搜索区域-->
      <el-row :gutter="20">
        <el-col :span="16">
          <el-input placeholder="请输入名字或学号"
                    ref="inputRef"
                    v-model="dataList.query">
            <el-button slot="append"
                       class="serchBtn"
                       icon="el-icon-search"
                       @click="serchStudentClick"></el-button>
          </el-input>
        </el-col>
        <el-col :span="2.5">
          <el-button type="primary"
                     @click="dialogVisible = true">添加学生</el-button>
        </el-col>
        <el-col :span="2.5">
          <excel @excelList="importExcel"
                 ref="excelRef"></excel>
        </el-col>
        <el-col :span="2.5">
          <exportExcel>导出文件</exportExcel>
        </el-col>
      </el-row>
      <!--学生列表区域-->
      <el-table :data="studentList"
                highlight-current-row>
        <el-table-column type="index"
                         :index="indexMethod"></el-table-column>
        <el-table-column label="一寸照"
                         prop="studentImage">
          <template slot-scope="scope">
            <img :src="scope.row.studentImage"
                 style="width: 80px; height: 112.63px;"
                 alt="还没上传照片">
          </template>
        </el-table-column>
        <el-table-column label="学号"
                         prop="studentNumber"></el-table-column>
        <el-table-column label="姓名"
                         prop="name"></el-table-column>
        <el-table-column label="性别"
                         prop="sex"></el-table-column>
        <el-table-column label="学院"
                         prop="college"></el-table-column>
        <el-table-column label="班级"
                         prop="class"></el-table-column>
        <el-table-column label="所在楼宇"
                         prop="tower"></el-table-column>
        <el-table-column label="宿舍号"
                         prop="dorm"></el-table-column>
        <el-table-column label="电话"
                         prop="tel"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip class="item"
                        effect="dark"
                        content="修改信息"
                        placement="top"
                        :open-delay="700"
                        :enterable="false">
              <el-button type="primary"
                         icon="el-icon-edit"
                         circle
                         @click="editStudent(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip class="item"
                        effect="dark"
                        content="删除信息"
                        placement="top"
                        :open-delay="700"
                        :enterable="false">
              <el-button type="danger"
                         icon="el-icon-delete"
                         circle
                         @click="isDelectClick(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!--分页区域-->
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="dataList.pagenum"
                     :page-sizes="[1, 3, 5, 7]"
                     :page-size="dataList.pagesize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>
    <!--添加学生dialog-->
    <el-dialog title="添加信息"
               :visible.sync="dialogVisible"
               width="50%"
               @close="resetDialog">
      <!--Diage内容主体区域-->
      <el-form ref="addform"
               :model="addform"
               label-width="80px"
               :rules="formRules">
        <el-form-item label="学号"
                      prop="studentNumber">
          <el-input v-model="addform.studentNumber"></el-input>
        </el-form-item>
        <el-form-item label="姓名"
                      prop="name">
          <el-input v-model="addform.name"></el-input>
        </el-form-item>
        <el-form-item label="性别"
                      prop="sex">
          <el-input v-model="addform.sex"></el-input>
        </el-form-item>
        <el-form-item label="学院"
                      prop="college">
          <el-input v-model="addform.college"></el-input>
        </el-form-item>
        <el-form-item label="班级"
                      prop="class">
          <el-input v-model="addform.class"></el-input>
        </el-form-item>
        <el-form-item label="楼宇"
                      prop="tower">
          <el-input v-model="addform.tower"></el-input>
        </el-form-item>
        <el-form-item label="宿舍号"
                      prop="dorm">
          <el-input v-model="addform.dorm"></el-input>
        </el-form-item>
        <el-form-item label="电话"
                      prop="tel">
          <el-input v-model="addform.tel"></el-input>
        </el-form-item>
      </el-form>
      <!--内容主体底部-->
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="addStudentInfo">确 定</el-button>
      </span>
    </el-dialog>

    <!--修改信息dialog-->
    <el-dialog title="提示"
               :visible.sync="editStudentDialogVisible"
               width="50%"
               @close="editformCloseClick">
      <!--修改信息主体内容-->
      <el-form ref="editform"
               :model="editform"
               label-width="80px"
               :rules="editformRules">
        <el-form-item label="学号"
                      prop="studentNumber">
          <el-input v-model="editform.studentNumber"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名"
                      prop="name">
          <el-input v-model="editform.name"></el-input>
        </el-form-item>
        <el-form-item label="性别"
                      prop="sex">
          <el-input v-model="editform.sex"></el-input>
        </el-form-item>
        <el-form-item label="学院"
                      prop="college">
          <el-input v-model="editform.college"></el-input>
        </el-form-item>
        <el-form-item label="班级"
                      prop="class">
          <el-input v-model="editform.class"></el-input>
        </el-form-item>
        <el-form-item label="楼宇"
                      prop="tower">
          <el-input v-model="editform.tower"></el-input>
        </el-form-item>
        <el-form-item label="宿舍号"
                      prop="dorm">
          <el-input v-model="editform.dorm"></el-input>
        </el-form-item>
        <el-form-item label="电话"
                      prop="tel">
          <el-input v-model="editform.tel"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="editStudentDialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="editStudentInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import excel from '../excel/excel.vue'
import exportExcel from '../excel/exportExcel.vue'
import { studentListMixin } from 'commonjs/studentListMixin.js'
// import qs from 'qs'
export default {
  name: 'stuent',
  props: [''],
  created () {
    this.getStudentList()
  },
  components: {
    excel,
    exportExcel
  },
  data () {
    return {
    }
  },
  methods: {
    handleSizeChange (size) {
      // console.log(`每页 ${size} 条`)
      this.dataList.pagesize = size
      // 每当这个页面显示的条数发生改变，就应该通过数据请求重新拿到数据
      // 重新数据请求代码在这写
      this.getStudentList()
    },
    handleCurrentChange (currentPage) {
      // console.log(`当前页: ${currentPage}`)
      this.dataList.pagenum = currentPage
      // 这里也需要重新请求一下数据
      this.getStudentList()
    },
    // 获取全部学生信息
    async getStudentList () {
      const { data: res } = await this.$axios.get('/student/studentList', {
        params: {
          pagenum: this.dataList.pagenum,
          pagesize: this.dataList.pagesize
        }
      })
      // console.log('学生信息', res)
      // console.log(res.studentlist)
      if (res.meta.code !== 200) {
        return this.$message('获取列表失败')
      } else {
        this.studentList = res.studentlist
        this.total = res.total
      }
    },
    // 搜索
    async serchStudentClick () {
      const { data: res } = await this.$axios.get('/student/findStudent', {
        params: {
          query: this.dataList.query
        }
      })
      // console.log(res)
      if (res.meta.code !== 200) {
        this.studentList = res.result
        return this.$message.warning(res.meta.msg)
      } else {
        this.studentList = res.result
      }
    },
    // 点击dialog确定按钮，添加新的学生信息
    addStudentInfo () {
      this.$refs.addform.validate(async valid => {
        if (!valid) return 0
        // 验证成功，发起添加用户的网络请求，这里进行模拟
        this.dialogVisible = false
        const { data: res } = await this.$axios.get('/student/addStudent', {
          params: {
            studentNumber: this.addform.studentNumber,
            name: this.addform.name,
            sex: this.addform.sex,
            college: this.addform.college,
            class: this.addform.class,
            tower: this.addform.tower,
            dorm: this.addform.dorm,
            tel: this.addform.tel
          }
        })
        if (res.code !== 0) {
          return this.$message({
            message: '添加失败',
            type: 'warning'
          })
        } else {
          this.getStudentList()
          return this.$message({
            message: '添加成功',
            type: 'success'
          })
        }
      })
    }
  },
  mixins: [studentListMixin]
}

</script>
<style scoped>
.serchBtn {
  background-color: #409eff !important;
  color: #ffffff !important;
}
</style>
